<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - Asurada SSO客户端</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
        }
        .login-container {
            max-width: 400px;
            margin: 0 auto;
        }
        .login-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .login-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px 15px 0 0;
            padding: 30px;
            text-align: center;
        }
        .login-body {
            padding: 30px;
        }
        .form-control {
            border-radius: 10px;
            border: 2px solid #e9ecef;
            padding: 12px 15px;
            transition: all 0.3s ease;
        }
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }
        .btn-login {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            border-radius: 10px;
            padding: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        .input-group-text {
            background: transparent;
            border: 2px solid #e9ecef;
            border-right: none;
            border-radius: 10px 0 0 10px;
        }
        .input-group .form-control {
            border-left: none;
            border-radius: 0 10px 10px 0;
        }
        .loading-spinner {
            display: none;
        }
        .alert {
            border-radius: 10px;
            border: none;
        }
        .back-link {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: color 0.3s ease;
        }
        .back-link:hover {
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-container">
            <div class="card login-card">
                <div class="login-header">
                    <h3 class="mb-0">
                        <i class="bi bi-shield-check me-2"></i>
                        SSO 登录
                    </h3>
                    <p class="mb-0 mt-2 opacity-75">使用您的账户登录系统</p>
                </div>
                
                <div class="login-body">
                    <!-- 错误提示 -->
                    <div id="errorAlert" class="alert alert-danger d-none" role="alert">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        <span id="errorMessage"></span>
                    </div>
                    
                    <!-- 成功提示 -->
                    <div id="successAlert" class="alert alert-success d-none" role="alert">
                        <i class="bi bi-check-circle me-2"></i>
                        <span id="successMessage"></span>
                    </div>

                    <!-- 登录表单 -->
                    <form id="loginForm">
                        <div class="mb-3">
                            <label for="account" class="form-label">账号</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-person"></i>
                                </span>
                                <input type="text" class="form-control" id="account" name="account" 
                                       placeholder="用户名/手机号/邮箱" required>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="password" class="form-label">密码</label>
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="bi bi-lock"></i>
                                </span>
                                <input type="password" class="form-control" id="password" name="password" 
                                       placeholder="请输入密码" required>
                                <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                    <i class="bi bi-eye"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-login">
                                <span class="login-text">
                                    <i class="bi bi-box-arrow-in-right me-2"></i>
                                    登录
                                </span>
                                <span class="loading-spinner">
                                    <span class="spinner-border spinner-border-sm me-2" role="status"></span>
                                    登录中...
                                </span>
                            </button>
                        </div>
                    </form>
                    
                    <!-- 其他操作 -->
                    <div class="text-center mt-4">
                        <small class="text-muted">
                            还没有账号？请联系管理员注册
                        </small>
                    </div>
                </div>
            </div>
            
            <!-- 返回首页链接 -->
            <div class="text-center mt-3">
                <a href="/" class="back-link">
                    <i class="bi bi-arrow-left me-1"></i>
                    返回首页
                </a>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loginForm = document.getElementById('loginForm');
            const errorAlert = document.getElementById('errorAlert');
            const successAlert = document.getElementById('successAlert');
            const errorMessage = document.getElementById('errorMessage');
            const successMessage = document.getElementById('successMessage');
            const togglePassword = document.getElementById('togglePassword');
            const passwordInput = document.getElementById('password');
            const loginText = document.querySelector('.login-text');
            const loadingSpinner = document.querySelector('.loading-spinner');
            
            // 获取重定向URL
            const urlParams = new URLSearchParams(window.location.search);
            const redirectUrl = urlParams.get('redirect') || '/';
            
            // 密码显示/隐藏切换
            togglePassword.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                
                const icon = this.querySelector('i');
                if (type === 'password') {
                    icon.className = 'bi bi-eye';
                } else {
                    icon.className = 'bi bi-eye-slash';
                }
            });
            
            // 表单提交处理
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 隐藏之前的提示
                hideAlerts();
                
                // 显示加载状态
                showLoading(true);
                
                // 获取表单数据
                const formData = new FormData(loginForm);
                const loginData = {
                    account: formData.get('account'),
                    password: formData.get('password')
                };
                
                // 发送登录请求
                axios.post('/sso/login', loginData, {
                    params: {
                        redirect: redirectUrl
                    }
                })
                .then(function(response) {
                    showLoading(false);
                    
                    if (response.data.code === 200) {
                        // 登录成功
                        showSuccess('登录成功，正在跳转...');
                        
                        // 延迟跳转，让用户看到成功提示
                        setTimeout(function() {
                            window.location.href = redirectUrl;
                        }, 1000);
                    } else {
                        // 登录失败
                        showError(response.data.message || '登录失败，请重试');
                    }
                })
                .catch(function(error) {
                    showLoading(false);
                    console.error('登录请求失败:', error);
                    
                    if (error.response && error.response.data && error.response.data.message) {
                        showError(error.response.data.message);
                    } else {
                        showError('网络错误，请检查网络连接后重试');
                    }
                });
            });
            
            // 显示错误提示
            function showError(message) {
                errorMessage.textContent = message;
                errorAlert.classList.remove('d-none');
                successAlert.classList.add('d-none');
            }
            
            // 显示成功提示
            function showSuccess(message) {
                successMessage.textContent = message;
                successAlert.classList.remove('d-none');
                errorAlert.classList.add('d-none');
            }
            
            // 隐藏所有提示
            function hideAlerts() {
                errorAlert.classList.add('d-none');
                successAlert.classList.add('d-none');
            }
            
            // 显示/隐藏加载状态
            function showLoading(show) {
                if (show) {
                    loginText.style.display = 'none';
                    loadingSpinner.style.display = 'inline';
                    loginForm.querySelector('button[type="submit"]').disabled = true;
                } else {
                    loginText.style.display = 'inline';
                    loadingSpinner.style.display = 'none';
                    loginForm.querySelector('button[type="submit"]').disabled = false;
                }
            }
            
            // 检查URL中的错误参数
            const error = urlParams.get('error');
            if (error) {
                switch (error) {
                    case 'callback_failed':
                        showError('SSO回调处理失败，请重新登录');
                        break;
                    case 'token_expired':
                        showError('登录已过期，请重新登录');
                        break;
                    case 'unauthorized':
                        showError('未授权访问，请先登录');
                        break;
                    default:
                        showError('登录失败，请重试');
                }
            }
            
            // 自动聚焦到账号输入框
            document.getElementById('account').focus();
        });
    </script>
</body>
</html>